<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li><a href="#/home">首页</a></li>
        <li><a href="#/about">关于</a></li>
    </ul>

    <div id="routeView">
        <!-- 放一个代码片段 -->
    </div>

    <script>
        const routes = [
            {
                path:'#/home',
                component:'首页页面内容'
            },
            {
                path:'#/about',
                component:'about page'
            }
        ]

        const routeView = document.getElementById('routeView')
        
        window.addEventListener('DOMContentLoaded',onHashChange)
        window.addEventListener('hashchange',onHashChange)

        function onHashChange() {
            console.log(location.hash);
            routes.forEach((item,index)=>{
                if (item.path === location.hash) {
                    routeView.innerHTML = item.component
                }
            })
        }

    </script>
</body>
</html>